<template>
  <div class="base-container">
    <el-form
      ref="elForm"
      size="medium"
      v-show="toolQueryVisiable"
      label-width="100px"
      style="border-bottom: 1px solid greey"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="接口路由" prop="actionKey">
            <el-input
              v-model.trim="toolQuery.actionKey"
              placeholder="请输入接口路由"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="控制器" prop="controller">
            <el-input
              v-model.trim="toolQuery.controller"
              placeholder="请输入控制器"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="模块名" prop="module">
            <el-input
              v-model="toolQuery.module"
              placeholder="请输入模块名"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">
          <el-form-item label="是否可用" prop="status">
            <el-switch v-model="status" />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="接口权限" prop="appIntercept">
            <el-switch v-model="appIntercept" />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="登录拦截" prop="loginIntercept">
            <el-switch v-model="loginIntercept" />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="用户权限拦截" prop="permsIntercept">
            <el-switch v-model="permsIntercept" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="initData">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="actionSyncHandle">同步</el-button>
            <el-button @click="clearHandle">清除缓存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <toolBar
      :tableColumnConfig="tableColumnConfig"
      :checkedRow="checkedRow"
      :dataList="dataList"
      :toolBarAddBTN="toolBarAddBTN"
      @edit="edit"
      @del="del"
    ></toolBar>
    <el-table
      v-loading="tableLoading"
      :data="processData"
      style="width: 100%"
      @selection-change="selectionChangeHandle"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="55"> </el-table-column>
      <template v-for="(item, index) in cptColumn">
        <el-table-column :key="index" :prop="item.prop" :label="item.label" />
      </template>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.page"
      :page-sizes="[5, 10, 20, 400]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.totalRow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <detail ref="detail" :dialog-title="dialogTitle" @edit="edit" />
  </div>
</template>

<script>
import toolBar from "@/components/common/toolBar";
import detail from "./component/detail";
import curd from "@/mixins/curd.js";
import { sendJSON } from "@/utils/request";
const CURD = new curd({
  url: "/sys/action/"
});
export default {
  components: { toolBar, detail },
  mixins: [CURD],
  data() {
    return {
      // 条件查询
      toolQuery: {
        actionKey: undefined,
        module: undefined,
        controller: undefined,
        status: 1,
        appIntercept: undefined,
        loginIntercept: undefined,
        permsIntercept: undefined
      },
      // 列表配置
      tableColumnConfig: [
        { id: 1, prop: "actionKey", label: "接口路由", show: true },
        { id: 2, prop: "module", label: "模块名", show: true },
        { id: 3, prop: "controller", label: "控制器", show: true },
        { id: 4, prop: "status", label: "状态", show: true },
        { id: 5, prop: "appIntercept", label: "接口权限", show: true },
        { id: 6, prop: "loginIntercept", label: "登录拦截", show: true },
        { id: 7, prop: "permsIntercept", label: "用户拦截", show: true },
        { id: 8, prop: "created", label: "创建时间", show: true },
        { id: 9, prop: "updated", label: "更新时间", show: true }
      ],
      // 需要 0/1 转换为 布尔值的字段,用于配置计算属性
      transfromArr: [
        "appIntercept",
        "loginIntercept",
        "permsIntercept",
        "status"
      ],
      // 该页面不能新增
      toolBarAddBTN: false
    };
  },
  methods: {
    //   同步
    actionSyncHandle() {
      console.log("同步");
      sendJSON("/sys/action/sync").then(res => {
        let { success, msg } = res;
        this.$message.success(msg);
        success && this.initData();
      });
    },
    // 清除后端缓存
    clearHandle() {
      sendJSON("/sys/action/clear").then(res => {
        this.$message.success(res.msg);
      });
    },
    // 重置当前查询
    resetForm() {
      this.toolQuery = {
        actionKey: "",
        module: "",
        controller: "",
        status: 1,
        appIntercept: 0,
        loginIntercept: 0,
        permsIntercept: 0
      };
    },
    // 编辑
    openEdit(obj) {
      this.$refs["detail"].dialogVisible = true;
      const from = JSON.parse(JSON.stringify(obj));
      this.dialogTitle = `当前编写的：${from.actionKey}`;
      ["appIntercept", "loginIntercept", "permsIntercept", "status"].forEach(
        item => {
          from[item] == "禁用" ? (from[item] = false) : (from[item] = true);
        }
      );
      this.$refs["detail"].formData = from;
    }
  },
  computed: {
    status: {
      get: function() {
        return this.toolQuery.status != 0;
      },
      set: function(val) {
        return val == false
          ? (this.toolQuery.status = 0)
          : (this.toolQuery.status = 1);
      }
    },
    appIntercept: {
      get() {
        return this.toolQuery.appIntercept != 0;
      },
      set: function(val) {
        return val == false
          ? (this.toolQuery.appIntercept = 0)
          : (this.toolQuery.appIntercept = 1);
      }
    },
    loginIntercept: {
      get() {
        return this.toolQuery.loginIntercept != 0;
      },
      set: function(val) {
        return val == false
          ? (this.toolQuery.loginIntercept = 0)
          : (this.toolQuery.loginIntercept = 1);
      }
    },
    permsIntercept: {
      get() {
        return this.toolQuery.permsIntercept != 0;
      },
      set: function(val) {
        return val == false
          ? (this.toolQuery.permsIntercept = 0)
          : (this.toolQuery.permsIntercept = 1);
      }
    }
  }
};
</script>

<style lang="scss">
@import "@/styles/base/index.scss";
</style>
